<template>
  <div class="container" :class="{'mobile_container': isMobile}">
    <topHeader></topHeader>

    <div class="banner">
      <img src="../assets/image/about_banner.jpg" alt="">
    </div>
    <div class="content wrapper" v-if="!isMobile">
      <div>
        <div class="img_box fl">
          <img src="../assets/image/about_img1.png" alt="">
        </div>
        <div class="text_box fl">
          <div class="title">敬畏专业</div>
          <div class="desc">斑马公学面向未来人才需求，在北大学习科学实验室《中国学习计划》的统领下，基于教育部旗下十三五重大课题《幼儿游戏化课程的创新实践研究》，研发并开设了幼升小综合素质课程、英语启蒙课程、识字阅读启蒙课程、表演与表达课程、思维数学课程。</div>
        </div>
        <div class="clear"></div>
      </div>

      <div>
        <div class="text_box fl">
          <div class="title">科学赋能</div>
          <div class="desc">在教育过程中，斑马公学结合互联网、视频直播、大数据等技术，将孩子的学习成长数据化、可视化，并采用北大教育学院教育游戏化研究团队研发的游戏化教学法、PBL项目学习法、探究式学习法。</div>
        </div>

        <div class="img_box fl">
          <img src="../assets/image/about_img2.png" alt="">
        </div>
        <div class="clear"></div>
      </div>

      <div>
        <div class="img_box fl">
          <img src="../assets/image/about_img3.jpg" alt="">
        </div>
        <div class="text_box fl">
          <div class="title">原动力信仰</div>
          <div class="desc">斑马公学的创始团队坚信：“教育是不可逆的，过了就不会再有第二次。对孩子来说，学习的成就可能受环境影响、受学校影响、受家庭影响，但一切影响的源头是孩子内心的原动力，这从根本上决定了孩子的未来成就！”</div>
        </div>
        <div class="clear"></div>
      </div>
    </div>
    <div v-if="isMobile">
      <img src="../assets/image/phone_img1.jpg" style="width: 100%" alt="">
    </div>

    <copyRight></copyRight>
  </div>
</template>

<style scoped>
  .mobile_container .banner {
    padding-top: 2.133333rem;
  }
  .container .banner img {
    width: 100%;
  }
  .container .content{
    margin: 72px auto !important;
  }
  .container .content>div{
    margin-bottom: 40px;;
    padding: 0 6%;
    box-sizing: border-box;
  }
  .container .content .img_box {
    width: 470px;
    height: 448px;
  }
  .container .content .text_box {
    width: 538px;
    height: 448px;
    margin-left: 48px;
  }
  .container .content .img_box img {
    width: 100%;
  }
  .content > div:nth-child(2) .text_box  {
    margin-left: 0;
    margin-right: 48px;
  }
  .container .content .title {
    font-size: 26px;
    color: #333333;
    position: relative;
    padding-top: 45px;
    margin-top: 60px;
  }
  .container .content .title:before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 130px;
    height: 10px;
    background: #EF8D3E;
  }
  .container .content .desc {
    font-size: 18px;
    color: #333333;
    margin-top: 35px;
    line-height:44px;
    text-align: justify;
  }
</style>

<script>
import copyRight from './common/copyRight'
import topHeader from './common/topHeader'

export default {
  name: 'about',
  data() {
    return {
      tab_id: 5,
      isMobile: false,
    }
  },
  created() {
    this.isMobile = /(iPhone|iPad|iPod|iOS|Android)/i.test(window.navigator.userAgent);
  },
  methods: {
    
  },
  components: {
    copyRight,
    topHeader,
  }
}
</script>